<template>
  <headView />
  <div class="min-h-screen bg-gradient-to-br from-orange-50 via-white to-orange-50 py-12">
    <!-- 搜索类型切换 -->
    <div class="container mx-auto px-4 mb-8">
      <div class="flex flex-wrap justify-center gap-4">
        <button 
          @click="activeTab = 'posts'"
          :class="[
            'px-6 py-3 rounded-full font-medium transition-all duration-300',
            activeTab === 'posts' 
              ? 'bg-orange-600 text-white shadow-lg' 
              : 'bg-white text-orange-700 border border-orange-300 hover:bg-orange-50'
          ]"
          v-if="showPostsTab"
        >
          帖子搜索结果 ({{ posts.length }})
        </button>
        <button 
          @click="activeTab = 'pets'"
          :class="[
            'px-6 py-3 rounded-full font-medium transition-all duration-300',
            activeTab === 'pets' 
              ? 'bg-orange-600 text-white shadow-lg' 
              : 'bg-white text-orange-700 border border-orange-300 hover:bg-orange-50'
          ]"
          v-if="showPetsTab"
        >
          宠物搜索结果 ({{ pets.length }})
        </button>
        <button 
          @click="activeTab = 'users'"
          :class="[
            'px-6 py-3 rounded-full font-medium transition-all duration-300',
            activeTab === 'users' 
              ? 'bg-orange-600 text-white shadow-lg' 
              : 'bg-white text-orange-700 border border-orange-300 hover:bg-orange-50'
          ]"
          v-if="showUsersTab"
        >
          用户搜索结果 ({{ users.length }})
        </button>
      </div>
    </div>

    <div v-if="isLoading" class="container mx-auto px-4 text-center py-16">
      <p class="text-xl text-orange-800">正在加载搜索结果...</p>
    </div>

    <!-- 帖子搜索结果 -->
    <div v-if="activeTab === 'posts'" class="container mx-auto px-4">
      <!-- 帖子卡片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <router-link
          v-for="post in paginatedPosts"
          :key="post.id"
          :to="{ name: 'Detail', params: { id: post.id } }"
          class="group bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl border border-orange-100"
        >
          <!-- 图片容器 -->
          <div class="relative h-64 overflow-hidden">
            <img 
              :src="post.picture" 
              :alt="post.title + '的照片'"
              class="w-full h-full object-cover transform transition-transform duration-300 group-hover:scale-110"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>

          <!-- 信息区域 -->
          <div class="p-6">
            <h2 class="text-xl font-bold text-orange-900 mb-2 group-hover:text-orange-600 transition-colors">
              {{ post.title }}
            </h2>
            <p class="text-sm text-gray-600 mb-4 line-clamp-2">{{ post.content || '查看详细内容' }}</p>
            <div class="flex items-center justify-between">
              <span class="text-sm text-orange-700">点击查看详情</span>
              <svg 
                class="w-5 h-5 text-orange-600 transform transition-transform duration-300 group-hover:translate-x-2" 
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24"
              >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </div>
          </div>
        </router-link>
      </div>

      <!-- 帖子搜索结果分页 -->
      <div v-if="totalPostPages > 1" class="mt-12 flex justify-center">
        <div class="inline-flex rounded-lg shadow-sm">
          <!-- 分页按钮 - 与宠物分页共用相同逻辑 -->
          <button
            @click="prevPage('posts')"
            :disabled="currentPostPage === 1"
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium bg-white border border-orange-300 rounded-l-lg"
            :class="[currentPostPage === 1 ? 'cursor-not-allowed' : 'hover:bg-orange-50']"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </button>

          <button
            v-for="page in totalPostPages"
            :key="page"
            @click="goToPage(page, 'posts')"
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium transition-all duration-300"
            :class="[
              currentPostPage === page 
                ? 'bg-orange-600 text-white z-10' 
                : 'bg-white text-orange-700 hover:bg-orange-50',
              page === 1 ? 'rounded-none' : '',
              page === totalPostPages ? 'rounded-r-lg' : '',
              'border border-orange-300',
            ]"
          >
            {{ page }}
          </button>

          <button
            @click="nextPage('posts')"
            :disabled="currentPostPage === totalPostPages"
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium bg-white border border-orange-300 rounded-r-lg"
            :class="[currentPostPage === totalPostPages ? 'cursor-not-allowed' : 'hover:bg-orange-50']"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>

      <!-- 帖子空状态 -->
      <div v-if="paginatedPosts.length === 0 && !isLoading" class="text-center py-16">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-orange-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
        </svg>
        <p class="text-xl text-orange-700">暂无符合条件的帖子</p>
      </div>
    </div>

    <!-- 宠物搜索结果 -->
    <div v-if="activeTab === 'pets'" class="container mx-auto px-4">
      <!-- 宠物卡片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <router-link
          v-for="pet in paginatedPets"
          :key="pet.id"
          :to="{ name: 'Detail', params: { id: pet.id } }"
          class="group bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl border border-orange-100"
        >
          <!-- 图片容器 -->
          <div class="relative h-64 overflow-hidden">
            <img 
              :src="pet.picture" 
              :alt="pet.title + '的照片'"
              class="w-full h-full object-cover transform transition-transform duration-300 group-hover:scale-110"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>

          <!-- 信息区域 -->
          <div class="p-6">
            <h2 class="text-xl font-bold text-orange-900 mb-2 group-hover:text-orange-600 transition-colors">
              {{ pet.title }}
            </h2>
            <div class="flex items-center justify-between">
              <span class="text-sm text-orange-700">点击查看详情</span>
              <svg 
                class="w-5 h-5 text-orange-600 transform transition-transform duration-300 group-hover:translate-x-2" 
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24"
              >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </div>
          </div>
        </router-link>
      </div>

      <!-- 宠物搜索结果分页 -->
      <div v-if="totalPetPages > 1" class="mt-12 flex justify-center">
        <div class="inline-flex rounded-lg shadow-sm">
          <!-- 左箭头按钮 -->
          <button
            @click="prevPage('pets')"
            :disabled="currentPetPage === 1"
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium bg-white border border-orange-300 rounded-l-lg"
            :class="[currentPetPage === 1 ? 'cursor-not-allowed' : 'hover:bg-orange-50']"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </button>

          <!-- 数字页码按钮 -->
          <button
            v-for="page in totalPetPages"
            :key="page"
            @click="goToPage(page, 'pets')"
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium transition-all duration-300"
            :class="[
              currentPetPage === page 
                ? 'bg-orange-600 text-white z-10' 
                : 'bg-white text-orange-700 hover:bg-orange-50',
              page === 1 ? 'rounded-none' : '',
              page === totalPetPages ? 'rounded-r-lg' : '',
              'border border-orange-300',
            ]"
          >
            {{ page }}
          </button>

          <!-- 右箭头按钮 -->
          <button
            @click="nextPage('pets')"
            :disabled="currentPetPage === totalPetPages"
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium bg-white border border-orange-300 rounded-r-lg"
            :class="[currentPetPage === totalPetPages ? 'cursor-not-allowed' : 'hover:bg-orange-50']"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>

      <!-- 宠物空状态 -->
      <div v-if="paginatedPets.length === 0 && !isLoading" class="text-center py-16">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-orange-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
        </svg>
        <p class="text-xl text-orange-700">暂无符合条件的宠物</p>
      </div>
    </div>

    <!-- 用户搜索结果 -->
    <div v-if="activeTab === 'users'" class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div 
          v-for="user in users" 
          :key="user.id"
          class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl border border-orange-100"
        >
          <div class="p-6">
            <div class="flex items-center space-x-4">
              <!-- 用户头像 -->
              <div class="flex-shrink-0">
                <img 
                  :src="user.avatar || 'https://picsum.photos/id/1005/200/200'" 
                  :alt="user.nickname + '的头像'"
                  class="w-16 h-16 rounded-full object-cover border-2 border-orange-200"
                >
              </div>
              
              <!-- 用户信息 -->
              <div class="flex-grow">
                <h3 class="text-lg font-bold text-orange-900">{{ user.nickname }}</h3>
                <p class="text-sm text-orange-600">账号: {{ user.account }}</p>
              </div>
              
              <!-- 添加好友按钮 -->
              <button 
                @click="addFriend(user.id)"
                class="flex-shrink-0 bg-orange-500 hover:bg-orange-600 text-white p-3 rounded-full transition-all duration-300 transform hover:scale-110"
                title="添加好友"
              >
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户空状态 -->
      <div v-if="users.length === 0 && !isLoading" class="text-center py-16">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-orange-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
        </svg>
        <p class="text-xl text-orange-700">暂无符合条件的用户</p>
      </div>
    </div>
  </div>
  <fonnter />
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import fonnter from '../../components/fonnter.vue';
import headView from '../../components/head.vue';
import axios from 'axios';
import Cookies from 'js-cookie';
import { useAnimalStore } from '../../stores/animalStore';

const router = useRouter();
const animalStore = useAnimalStore();
const itemsPerPage = 6;
const isLoading = ref(true);
const activeTab = ref('posts'); // 默认显示帖子搜索结果

// 搜索结果数据
const posts = ref([]);
const pets = ref([]);
const users = ref([]);

// 分页状态
const currentPostPage = ref(1);
const currentPetPage = ref(1);

// 控制标签显示
const showPostsTab = computed(() => posts.value.length > 0);
const showPetsTab = computed(() => pets.value.length > 0);
const showUsersTab = computed(() => users.value.length > 0);

// 添加好友函数
const addFriend = async (userId) => {
  try {
    const token = Cookies.get('token');
    const response = await axios.get(
      'http://localhost:8080/Petrescue/users/addFriend',
      {
        params: { friendId: userId },
        headers: {
          'Content-Type': 'application',
          'Authorization': `Bearer ${token}` // 添加token
        },
        withCredentials: true
      }
    );
    
    if (response.data.success && response.data.code === 0) {
      alert('好友请求已发送');
    } else {
      alert('发送好友请求失败: ' + (response.data.message || '未知错误'));
    }
  } catch (error) {
    console.error('添加好友出错:', error);
    alert('添加好友时发生错误，请稍后重试');
  }
};

// 初始化时获取数据
onMounted(async () => {
  try {
    const routeQuery = router.currentRoute.value.query;
    const searchResults = routeQuery.results;
    const searchType = routeQuery.searchType;
    
    if (searchResults) {
      try {
        const parsedResults = JSON.parse(searchResults);
        
        // 根据搜索类型显示对应结果
        if (searchType === 'post') {
          // 帖子搜索结果
          posts.value = parsedResults || [];
          activeTab.value = 'posts';
        } else if (searchType === 'user') {
          // 用户搜索结果
          users.value = parsedResults || [];
          activeTab.value = 'users';
        } else if (searchType === 'pet') {
          // 宠物搜索结果
          pets.value = parsedResults.Blogs || [];
          activeTab.value = 'pets';
          animalStore.setDogs(pets.value);
        } else {
          // 混合结果 - 可能同时包含多种类型
          if (parsedResults.blogs) posts.value = parsedResults.blogs;
          if (parsedResults.Blogs) pets.value = parsedResults.Blogs;
          if (parsedResults.Users) users.value = parsedResults.Users;
          
          // 自动选择第一个有结果的标签
          if (posts.value.length > 0) activeTab.value = 'posts';
          else if (pets.value.length > 0) activeTab.value = 'pets';
          else if (users.value.length > 0) activeTab.value = 'users';
        }
      } catch (parseError) {
        console.error('解析搜索结果失败:', parseError);
      }
    } else {
      // 如果没有搜索参数，默认加载宠物数据
      await animalStore.fetchDogs(2, 2);
      pets.value = animalStore.dogs;
      activeTab.value = 'pets';
    }
  } catch (error) {
    console.error('获取搜索结果失败:', error);
  } finally {
    isLoading.value = false;
  }
});

// 分页计算
const paginatedPosts = computed(() => {
  if (isLoading.value || !Array.isArray(posts.value)) return [];
  const start = (currentPostPage.value - 1) * itemsPerPage;
  return posts.value.slice(start, start + itemsPerPage);
});

const paginatedPets = computed(() => {
  if (isLoading.value || !Array.isArray(pets.value)) return [];
  const start = (currentPetPage.value - 1) * itemsPerPage;
  return pets.value.slice(start, start + itemsPerPage);
});

const totalPostPages = computed(() => {
  if (isLoading.value || !Array.isArray(posts.value) || !posts.value.length) return 0;
  return Math.ceil(posts.value.length / itemsPerPage);
});

const totalPetPages = computed(() => {
  if (isLoading.value || !Array.isArray(pets.value) || !pets.value.length) return 0;
  return Math.ceil(pets.value.length / itemsPerPage);
});

// 分页方法
function goToPage(page, type) {
  if (type === 'posts' && page >= 1 && page <= totalPostPages.value) {
    currentPostPage.value = page;
  } else if (type === 'pets' && page >= 1 && page <= totalPetPages.value) {
    currentPetPage.value = page;
  }
  
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

function nextPage(type) {
  if (type === 'posts' && currentPostPage.value < totalPostPages.value) {
    goToPage(currentPostPage.value + 1, 'posts');
  } else if (type === 'pets' && currentPetPage.value < totalPetPages.value) {
    goToPage(currentPetPage.value + 1, 'pets');
  }
}

function prevPage(type) {
  if (type === 'posts' && currentPostPage.value > 1) {
    goToPage(currentPostPage.value - 1, 'posts');
  } else if (type === 'pets' && currentPetPage.value > 1) {
    goToPage(currentPetPage.value - 1, 'pets');
  }
}
</script>
<style scoped lang="less">
// 颜色变量
@orange-50: #fff7ed;
@orange-100: #ffedd5;
@orange-200: #fed7aa;
@orange-300: #fdba74;
@orange-400: #fb923c;
@orange-500: #f97316;
@orange-600: #ea580c;
@orange-700: #c2410c;
@orange-800: #9a3412;
@orange-900: #7c2d12;

@orange-light: #fff9f0;
@orange-lighter: #fef3c7;

// 基础样式
.min-h-screen {
  min-height: 100vh;
}

.bg-gradient-to-br {
  background: linear-gradient(135deg, @orange-50 0%, white 50%, @orange-50 100%);
}

// 卡片容器
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 1.25rem;

  @media (max-width: 768px) {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

// 卡片样式
.animal-card {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid @orange-100;

  &:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);

    .card-image {
      transform: scale(1.1);
    }
  }

  // 图片容器
  .image-container {
    position: relative;
    height: 16rem;
    overflow: hidden;

    .card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &:hover::after {
      opacity: 1;
    }
  }

  // 卡片内容
  .card-content {
    padding: 1.5rem;

    .title {
      font-size: 1.25rem;
      font-weight: 600;
      color: @orange-900;
      margin-bottom: 0.5rem;
      transition: color 0.3s ease;
    }

    .description {
      font-size: 0.875rem;
      color: @orange-700;
      margin-bottom: 1rem;
    }

    .meta-info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .view-detail {
        font-size: 0.75rem;
        color: @orange-600;
      }

      .arrow-icon {
        width: 1.25rem;
        height: 1.25rem;
        color: @orange-600;
        transition: transform 0.3s ease;
      }
    }
  }

  &:hover {
    .title {
      color: @orange-600;
    }

    .arrow-icon {
      transform: translateX(0.5rem);
    }
  }
}

// 分页样式
.pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;

  .pagination-container {
    display: inline-flex;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

    button {
      position: relative;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      font-weight: 500;
      border: 1px solid @orange-300;
      background: white;
      color: @orange-700;
      transition: all 0.3s ease;

      &:first-child {
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
      }

      &:last-child {
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
      }

      &:hover:not(:disabled) {
        background: @orange-50;
      }

      &:disabled {
        cursor: not-allowed;
        opacity: 0.7;
      }

      &.active {
        background: @orange-600;
        color: white;
        border-color: @orange-600;
        z-index: 10;
      }

      .icon {
        width: 1.25rem;
        height: 1.25rem;
        color: @orange-600;
      }
    }
  }
}

// 空状态
.empty-state {
  text-align: center;
  padding: 4rem 0;

  .empty-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    color: @orange-400;
  }

  .empty-text {
    font-size: 1.25rem;
    color: @orange-700;
  }
}

// 头部横幅
.us-box {
  width: 100%;
  background: linear-gradient(135deg, @orange-light 0%, @orange-lighter 100%);
  display: flex;
  margin-top: -3rem;
  border-bottom: 1px solid fade(@orange-400, 20%);

  .joinleft {
    padding-top: 5rem;
    padding-left: 4.375rem;
    width: 60%;
    text-align: left;
    height: 15.625rem;

    h1 {
      font-family: 'Arial', sans-serif;
      font-size: 3.125rem;
      font-weight: 600;
      color: @orange-900;
      animation: fadeInUp 1s ease-out;
    }

    p {
      font-size: 1.375rem;
      color: @orange-800;
      animation: fadeInUp 1s ease-out 0.3s both;
    }
  }

  .joinright {
    height: 15.625rem;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      animation: float 6s ease-in-out infinite;
    }
  }
}

// 动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-0.625rem); }
  100% { transform: translateY(0); }
}

// 加载状态
.loading-state {
  text-align: center;
  padding: 4rem 0;

  .loading-text {
    font-size: 1.25rem;
    color: @orange-800;
  }
}

// 自定义滚动条
::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar-track {
  background: @orange-100;
  border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb {
  background: @orange-400;
  border-radius: 0.25rem;

  &:hover {
    background: @orange-500;
  }
}

// 用户卡片样式
.user-card {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid @orange-100;

  &:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
  }

  .user-content {
    padding: 1.5rem;

    .user-info {
      display: flex;
      align-items: center;
      gap: 1rem;

      .avatar-container {
        flex-shrink: 0;

        .user-avatar {
          width: 4rem;
          height: 4rem;
          border-radius: 50%;
          object-fit: cover;
          border: 2px solid @orange-200;
        }
      }

      .user-details {
        flex-grow: 1;

        .username {
          font-size: 1.125rem;
          font-weight: 600;
          color: @orange-900;
          margin-bottom: 0.25rem;
        }

        .account {
          font-size: 0.875rem;
          color: @orange-600;
          margin-bottom: 0.5rem;
        }

        .user-tags {
          font-size: 0.75rem;
          color: @orange-500;
        }
      }

      .add-friend-btn {
        flex-shrink: 0;
        background: @orange-500;
        color: white;
        padding: 0.75rem;
        border-radius: 50%;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;

        &:hover {
          background: @orange-600;
          transform: scale(1.1);
        }

        .friend-icon {
          width: 1.25rem;
          height: 1.25rem;
        }
      }
    }
  }
}

// 标签切换样式
.tab-switcher {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;

  .tab-button {
    padding: 0.75rem 1.5rem;
    border-radius: 2rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid @orange-300;

    &.active {
      background: @orange-600;
      color: white;
      box-shadow: 0 4px 6px rgba(234, 88, 12, 0.2);
    }

    &:not(.active) {
      background: white;
      color: @orange-700;

      &:hover {
        background: @orange-50;
      }
    }
  }
}
</style>